<template>
  <form-dialog ref="formDrawerRef" title="修改车辆信息" top="2vh" width="98%" @submit="handleSubmit">
    <div class="dialog-body">
      <!-- {{ form['carCategory'] }} -->
      <el-form ref="formRef" :model="form" :rules="rules" label-width="160px">
        <el-row :gutter="0">
          <el-col v-for="item in configList" :key="item.value"
            :span="item.value == 'typeLevel' && form['carCategory'] != 1 ? 0 : item.span">
            <template v-if="item.types === 'input'">
              <el-form-item :label="item.label" :prop="item.value">
                <!-- {{`${item.value}: ${form[item.value]}`}} -->
                <el-input v-model="form[item.value]" :placeholder="item.placeholder" size="large"></el-input>
              </el-form-item>
            </template>
            <template v-else-if="item.types === 'select'">
              <div v-if="item.value == 'typeLevel'">
                <el-form-item v-if="form['carCategory'] == 1" :label="item.label" :prop="item.value">
                  <!-- {{`${item.value}: ${form[item.value]}，${typeof form[item.value]}`}} -->
                  <el-select v-model="form[item.value]" :placeholder="item.placeholder" size="large">
                    <el-option v-for="option in item.options" :key="option.value" :label="option.label"
                      :value="option.value"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <el-form-item v-else :label="item.label" :prop="item.value">
                <el-select v-model="form[item.value]" :placeholder="item.placeholder" size="large">
                  <el-option v-for="option in item.options" :key="option.value" :label="option.label"
                    :value="option.value"></el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-else-if="item.types === 'time'">
              <el-form-item :label="item.label" :prop="item.value">
                <!-- {{`${item.value}: ${form[item.value]}`}} -->
                <el-date-picker v-model="form[item.value]" type="date" size="large" :placeholder="item.placeholder" value-format="YYYY-MM-DD"
                  style="width: 100%"></el-date-picker>
              </el-form-item>
            </template>


          </el-col>
        </el-row>
      </el-form>
    </div>
  </form-dialog>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useInitForm } from "@/hooks/useCommon";
import FormDialog from "@/components/FormDialog.vue";
import {modifyAnnualReviewVehicleFile} from "@/api/annualAudit";
import { ElMessage } from "element-plus";

// const props = defineProps({
//   recorditem: Object
// });

const { formDrawerRef, formRef, form, rules, handleEdit } = useInitForm({
  form: {
    operatorPhone:"",
    validityTime:"",
    inspectionId:"",
    checkTime:"",
    nowValidityTime:"",
    nowEvaluationTime:"",
    levelValid:"",
    nextEvaluationTime:"",
    vehicleLevel:"",
    evaluationTime:"",
    typeLevel:"",
    isInstallVideo:"",
    gpsLoginTime:"",
    isOnlineYear:"",
    coverageType:"",
    isValid:"",
    startCoverageTime:"",
    endCoverageTime:"",

  },
  rules: {
    operatorPhone: [{ required: true, message: "请输入经办人电话", trigger: "blur" }],
    validityTime: [{ required: true, message: "请选择下次年审日期", trigger: "blur" }],
    inspectionId: [{ required: true, message: "请输入检测单号", trigger: "blur" }],
    checkTime: [{ required: true, message: "请选择检测日期", trigger: "blur" }],
    nowValidityTime: [{ required: true, message: "请选择本次年审日期", trigger: "blur" }],
    nowEvaluationTime: [{ required: true, message: "请选择等级评定日期", trigger: "blur" }],
    levelValid: [{ required: true, message: "请选择等级有效期", trigger: "blur" }],
    nextEvaluationTime: [{ required: true, message: "请选择下次等级评定日期", trigger: "blur" }],
    vehicleLevel: [{ required: true, message: "请选择车辆技术等级", trigger: "blur" }],
    evaluationTime: [{ required: true, message: "请选择客车评定日期", trigger: "blur" }],
    typeLevel: [{ required: true, message: "请选择客车类型等级", trigger: "blur" }],
    isInstallVideo: [{ required: true, message: "请选择是否安装视频监控设备", trigger: "blur" }],
    gpsLoginTime: [{ required: true, message: "请选择GPS最后上线时间", trigger: "blur" }],
    isOnlineYear: [{ required: true, message: "请选择最近一年是否上线", trigger: "blur" }],
    coverageType: [{ required: true, message: "请选择投保险种", trigger: "blur" }],
    isValid: [{ required: true, message: "请选择是否有效保单", trigger: "blur" }],
    startCoverageTime: [{ required: true, message: "请选择起保日期", trigger: "blur" }],
    endCoverageTime: [{ required: true, message: "请选择终保日期", trigger: "blur" }],
  }
});
const configList = ref([
  {
    types: "input",
    span: 8,
    label: "经办人电话",
    value: "operatorPhone",
    width: "100px",
    placeholder: "请输入经办人电话"
  },
  {
    types: "time",
    span: 8,
    label: "年审有效期至",
    value: "validityTime",
    width: "120px",
    placeholder: "请选择下次年审日期"

  },
  {
    types: "input",
    span: 8,
    label: "检测单号",
    value: "inspectionId",
    width: "100px",
    placeholder: "需与实际检测单号一致"
  },
  {
    types: "time",
    span: 8,
    label: "检测日期",
    value: "checkTime",
    width: "100px",
    placeholder: "需与实际检测日期一致"
  },
  {
    types: "time",
    span: 8,
    label: "本次年审日期",
    value: "nowValidityTime",
    width: "100px",
    placeholder: "需与实际年审日期一致"
  },

  {
    types: "time",
    span: 8,
    label: "等级评定日期",
    value: "nowEvaluationTime",
    width: "100px",
    placeholder: "请选择等级评定日期"
  },
  {
    types: "select",
    span: 8,
    label: "等级有效期",
    value: "levelValid",
    width: "100px",
    placeholder: "请选择等级有效期",
    options: [
      {
        label: "6个月",
        value: "1"
      },
      {
        label: "12个月",
        value: "2"
      }
    ]
  },
  {
    types: "time",
    span: 8,
    label: "下次等级评定日期",
    value: "nextEvaluationTime",
    width: "140px",
    placeholder: "请选择下次等级评定日期"
  },
  {
    types: "select",
    span: 8,
    label: "车辆技术等级",
    value: "vehicleLevel",
    width: "100px",
    placeholder: "请选择车辆技术等级",
    options: [
      {
        label: "未评定",
        value: "1"
      },
      {
        label: "一级",
        value: "2"
      }, {
        label: "二级",
        value: "3"
      }
    ]
  },
  {
    types: "time",
    span: 8,
    label: "客车评定日期",
    value: "evaluationTime",
    width: "140px",
    placeholder: "请选择下次等级评定日期"
  },
  {
    types: "select",
    span: 8,
    label: "客车类型等级",//车辆类别显示为客运车辆时，显示客车类型等级
    value: "typeLevel",
    width: "100px",
    placeholder: "请选择客车类型等级",
    options: [
      {
        label: "特大型高三级",
        value: "1"
      },
      {
        label: "特大型高二级",
        value: "2"
      },
      {
        label: "特大型高一级",
        value: "3"
      },
      {
        label: "特大型中级",
        value: "4"
      },
      {
        label: "特大型普通级",
        value: "5"
      },
      {
        label: "大型高三级",
        value: "6"
      },
      {
        label: "大型高二级",
        value: "7"
      },
      {
        label: "大型高一级",
        value: "8"
      },
      {
        label: "大型中级",
        value: "9"
      },
      {
        label: "大型普通级",
        value: "10"
      },
      {
        label: "中型高二级",
        value: "11"
      },
      {
        label: "中型高一级",
        value: "12"
      },
      {
        label: "中型中级",
        value: "13"
      },
      {
        label: "中型普通级",
        value: "14"
      },
      {
        label: "小型高二级",
        value: "15"
      },
      {
        label: "小型高一级",
        value: "16"
      },
      {
        label: "小型中级",
        value: "17"
      },
      {
        label: "小型普通级",
        value: "18"
      },
      {
        label: "乘用车高级",
        value: "19"
      },
      {
        label: "乘用车中级",
        value: "20"
      },
      {
        label: "其他",
        value: "21"
      }
    ]
  },
  {
    types: "select",
    span: 8,
    label: "是否安装视频监控设备",
    value: "isInstallVideo",
    width: "100px",
    placeholder: "请选择是否安装视频监控设备",
    options: [
      {
        label: "是",
        value: 0
      },
      {
        label: "否",
        value: 1
      }
    ]
  },
  {
    types: "time",
    span: 8,
    label: "GPS最后上线时间",
    value: "gpsLoginTime",
    width: "140px",
    placeholder: "请选择GPS最后上线时间"
  },
  {
    types: "select",
    span: 8,
    label: "最近一年是否上线",
    value: "isOnlineYear",
    width: "100px",
    placeholder: "请选择最近一年是否上线",
    options: [
      {
        label: "是",
        value: 0
      },
      {
        label: "否",
        value: 1
      }
    ]
  },
  {
    types: "select",
    span: 8,
    label: "投保险种",
    value: "coverageType",
    width: "100px",
    placeholder: "请选择投保险种",
    options: [
      {
        label: "营业性",
        value: "1"
      },
      {
        label: "非营业性",
        value: "2"
      }
    ]
  },
  {
    types: "select",
    span: 8,
    label: "是否有效保单",
    value: "isValid",
    width: "100px",
    placeholder: "请选择是否有效保单",
    options: [
      {
        label: "是",
        value: 0
      },
      {
        label: "否",
        value: 1
      }
    ]
  },
  {
    types: "time",
    span: 8,
    label: "起保日期",
    value: "startCoverageTime",
    width: "140px",
    placeholder: "请选择起保日期"
  },
  {
    types: "time",
    span: 8,
    label: "终保日期",
    value: "endCoverageTime",
    width: "140px",
    placeholder: "请选择终保日期"
  },
]);

// 表单验证
const handleSubmit = () => {
  (formRef.value as any).validate((valid: any) => {
    if (valid == true) {
      modifyAnnualReviewVehicleFile(form).then((res: any) => {
        if (res == true) {
          ElMessage.success("修改成功");
          (formDrawerRef.value as any).close();
          // 触发自定义事件 refresh
          emit("refresh");
        } else {
          ElMessage.error(res);
        }
      });
    }
  });
};
const emit = defineEmits(["refresh"]);

defineExpose({
  handleEdit
});
</script>
<style scoped lang="scss">
.dialog-body {
  height: calc(100vh - 200px);
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
